<template>
    <div class="warpper" ref="details">
        <div class="container">
            <div class="head-title">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>媒体报道</el-breadcrumb-item>
                    <el-breadcrumb-item>详情页</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="new-warpper">
                    <div class="newList">
                        <div class="headline-warpper">
                            <div class="item-icon"><i class="big">25</i><i class="xiao">2018.12</i></div>
                            <div class="item-desc">
                                <div class="new-images"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532103881266&di=2ae1c90119d74333a7a3b0bac05167bd&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F342ac65c103853434cc02dda9f13b07eca80883a.jpg" alt=""></div>
                                <div class="new-title">云家政大数据升级 打造中国家庭生活服务入口</div>
                                <div class="new-desc">
                                    新华网上海4月16日电（记者高少华）云家政15日召开2014年第一季度运营情况沟通会，
                                    自2013年7月试运营至今，云家政不断升级大数据体系，并首次在行业中提出及实践产业链深耕，
                                    致力于用家政O2O全新模式助力民生
                                </div>
                              

                                <div class="leftright">
                                    <div class="title">上一篇：<span>金牌服务</span></div>
                                    <div class="title">下一篇：<span>育儿经验</span></div>
                                </div>
                                
                                <recommend></recommend>
                            </div>
                        </div>


                    </div>
                    <div class="rightList">
                        <right-list></right-list>
                    </div>
                </div>
            </div>
        </div>   
    </div>
</template>

<script>
import rightList from './common/rightList'
import recommend from './common/recommend'
export default {
    name: 'Article',
    components: {
       rightList, recommend
    },
    mounted() {
        this.$refs.details.style.minHeight = window.innerHeight - 267 + "px";
        var top = document.body.scrollTop || document.documentElement.scrollTop
        scrollBy(0,-top);
    }
}
</script>

<style lang="stylus" scoped>
    .warpper
        margin-top: 67px
        box-sizing border-box
        .new-warpper
            display flex
            margin-top 10px
            align-items flex-start
            .newList
                width 895px;
                .headline-warpper
                    display: flex
                    align-items flex-start
                    margin-bottom 59px
                    .leftright
                        margin-top 169px
                        display flex
                        justify-content space-between
                        .title
                            font-size 18px
                            color #616060;
                            cursor pointer
                            span 
                                &:hover
                                    color #ffb852
                    .item-icon
                        width 77px
                        height 75px
                        box-sizing border-box
                        color #fff
                        background-color #424242
                        display flex
                        flex-direction column
                        align-items center
                        justify-content center
                        border-right 6px solid #5287ff
                        border-bottom 4px solid #5287ff
                        .big
                            font-size 43px
                            margin-bottom 2px
                        .xiao   
                            font-size 12px
                    .item-desc
                        flex 1
                        margin-left 20px
                        .new-images
                            width 797px
                            height 343px
                            background-color #eee
                            margin-bottom 23px
                            img 
                                width 100%
                                height 100%
                                object-fit cover
                        .new-title
                            color #424242
                            font-size 25px
                            margin-bottom 24px
                        .new-desc
                            font-size 18px
                            color #777777
                            line-height 37px
            .rightList
                flex 1
                margin-left 67px
</style>

